:root {
  /* 主色调 - Cyber Cyan */
  --primary: #00F6FF;  /* 基础赛博青 */
  --primary-bright: rgba(0, 246, 255, 1);     /* 最亮 - 关键数据 */
  --primary-normal: rgba(0, 246, 255, 0.85);  /* 普通文本 */
  --primary-dim: rgba(0, 246, 255, 0.7);      /* 次要文本 */
  
  /* 背景色系统 - 由浅到深的层次 */
  --bg-panel: rgba(0, 246, 255, 0.05);    /* 面板背景 - 基础容器 */
  --bg-card: rgba(0, 246, 255, 0.06);     /* 卡片背景 - 内容卡片 */
  --bg-hover: rgba(0, 246, 255, 0.08);    /* 悬停效果 - 交互状态 */
  
  /* 边框色 */
  --border-bright: rgba(0, 246, 255, 0.2);   /* 高亮边框 */
  --border-normal: rgba(0, 246, 255, 0.15);  /* 普通边框 */
  --border-dim: rgba(0, 246, 255, 0.1);      /* 暗淡边框 */
  
  /* 特效 */
  --glow: 0 0 20px rgba(0, 246, 255, 0.4);  /* 赛博青光晕 */
  --grid: rgba(0, 246, 255, 0.1);           /* 网格线 */
  
  /* 状态颜色 */
  --success: #00F6FF;  /* 成功状态 */
  --warning: #FFB800;  /* 警告状态 */
  --error: #FF3B30;    /* 错误状态 */
  
  /* 添加字体变量 */
  --font-display: 'Orbitron', sans-serif;
  --font-mono: 'Source Code Pro', monospace;

  // font-family: Poppins, system-ui, Avenir, Helvetica, Arial, sans-serif;
  font-family: 'Source Code Pro', monospace;

  font-weight: 400;

  color-scheme: light dark;
  color: var(--primary-normal);
  background-color: #fff;

  font-synthesis: none;
  text-rendering: optimizeLegibility;

  // -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  --el-mask-color: #000;
  --el-transition-duration: 0.3;
  --el-mask-color: rgba(0, 0, 0, 0.85);
  --el-overlay-color-lighter: rgba(0, 0, 0, 0.85);

  --s: 2;
  --h: 20;
  --speed: 5s;
}

@font-face {
  font-family: Bangers;
  src: url(../fonts/Bangers/Bangers-Regular.ttf);
}

input[type="text"]:-internal-autofill-selected,
input[type="password"]:-internal-autofill-selected {
  background-color: transparent !important;
  background-image: none !important;
  transition: background-color 5000s ease-in-out 0s !important;
}
input[type="text"]:-webkit-autofill,
input[type="password"]:-webkit-autofill {
  box-shadow: 0 0 0px 50px #fff inset !important;
  -webkit-text-fill-color: #333;
}

a {
  color: var(--primary-normal);
  text-decoration: inherit;
}

* {
  box-sizing: border-box;
}
html, body {
  background: #000;
}

body {
  margin: 0;
  display: flex;
  width: 100vw;
  height: 100vh;
  background-color: #000000;
  background-image: 
      linear-gradient(rgba(0, 255, 255, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  position: relative;
}

#app::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, rgba(0, 255, 255, 0.1) 0%, transparent 80%);
  pointer-events: none;
  z-index: 1;
}
#app {
  display: flex;
  width: 100%;
  flex: 1;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.v-center {
  position: absolute;
  top: 50%;
  transform: translate(0,-50%);
}
.h-center {
  position: absolute;
  left: 50%;
  transform: translate(-50%,0);
}
.vh-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}



/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all .5s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

.grid-bg {
  background-image: linear-gradient(to bottom, rgba(0, 255, 0, 0.3) 12px,transparent 2px), linear-gradient(to right,rgba(0, 255, 0, 0.188) 12px,transparent 2px) ;
  background-size: 14px 14px;
  background-repeat: repeat;
}
.grid-bg-undertone {
  background-image: linear-gradient(to bottom, rgba(0, 255, 0, 0.18) 12px,transparent 2px), linear-gradient(to right,rgba(0, 255, 0, 0.188) 12px,transparent 2px) ;
  background-size: 14px 14px;
  background-repeat: repeat;
}


.com-dialog-new {
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid var(--border-normal) ;
  border-radius: 0;

  &.no-header {
    .el-dialog__header {
      display: none;
    }
  }
  .el-dialog__body {
    padding: 40px;
  }
}

@media (max-width: 900px) {
  .com-dialog {
    width: 80% !important;
  }
}

.logout-dropdown {
  background: transparent !important;
  border: 0 !important;
  .el-popper__arrow {
    display: none;
  }
}

.network-dropdown {
  background: transparent !important;
  border: 0 !important;
  .el-popper__arrow {
    display: none;
  }

  .el-scrollbar {
    top: -5px;
  }
}
.logout-menu {
  cursor: pointer;
  width: 126px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: #0f0;
  background: #040;
  border-radius: 3px;
  &:hover {
    background: #005E00;
  }
}


.network-menu {
  cursor: pointer;
  width: 130px;
  height: 26px;
  border-radius: 3px;
  line-height: 26px;
  text-align: center;
  font-size: 12px;
  color: #0f0;
  background: #002800;

  &:hover {
    background: #003800;
  }
}


/*滚动条样式*/
.scrollbar::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
.scrollbar::-webkit-scrollbar-track {
  background: rgba(0, 246, 255, 0.02);
}
.scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 246, 255, 0.25);
}
.scrollbar::-webkit-scrollbar-corner {
  background-color: transparent;
}
.scrollbar::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: rgba(0, 246, 255, 0.15);
}


.cf-verify {
  position: absolute;
  right: 10px;
  bottom: 10px;
}


@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}


@keyframes blinkColor {
  0%, 100% {
    color: rgba(0, 246, 255, .5);
  }
  50% {
    color: rgba(0, 246, 255, 1);
  }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }
  100% {
    transform: scale(20, 20);
    opacity: 0;
  }
}

@keyframes glitch-anim {
  0% { clip: rect(42px, 9999px, 44px, 0); }
  5% { clip: rect(12px, 9999px, 59px, 0); }
  10% { clip: rect(48px, 9999px, 29px, 0); }
  15% { clip: rect(42px, 9999px, 73px, 0); }
  20% { clip: rect(63px, 9999px, 27px, 0); }
  25% { clip: rect(34px, 9999px, 55px, 0); }
  30% { clip: rect(86px, 9999px, 73px, 0); }
  35% { clip: rect(20px, 9999px, 20px, 0); }
  40% { clip: rect(26px, 9999px, 60px, 0); }
  45% { clip: rect(25px, 9999px, 66px, 0); }
  50% { clip: rect(57px, 9999px, 98px, 0); }
  55% { clip: rect(5px, 9999px, 46px, 0); }
  60% { clip: rect(82px, 9999px, 31px, 0); }
  65% { clip: rect(54px, 9999px, 27px, 0); }
  70% { clip: rect(28px, 9999px, 99px, 0); }
  75% { clip: rect(45px, 9999px, 69px, 0); }
  80% { clip: rect(23px, 9999px, 85px, 0); }
  85% { clip: rect(54px, 9999px, 84px, 0); }
  90% { clip: rect(45px, 9999px, 47px, 0); }
  95% { clip: rect(37px, 9999px, 20px, 0); }
  100% { clip: rect(4px, 9999px, 91px, 0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

@keyframes fadeInUp {
  to {
      opacity: 1;
      transform: translateY(0);
  }
}
